import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
// import ZylBarChart from './ZylBarChart';

import LoginScreen from './pages/Login/Login';
import RegisterScreen from './pages/Register/Register';

import HomeScreen from './pages/Home/Home';
import FinancialScreen from './pages/Financial/Financial';
import BettingRecordScreen from './pages/BettingRecord/BettingRecord';
import AccountScreen from './pages/Account/Account';
import MineScreen from './pages/Mine/Mine';

const Stack = createNativeStackNavigator();


const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator
      initialRouteName="Home"
      screenOptions={{headerShown: false}}>
      <HomeStack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }} />
      <HomeStack.Screen name="RegisterScreen" component={RegisterScreen} />
    </HomeStack.Navigator>
  )
}

function HomeTabs() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen
        name="HomeScreen"
        component={HomeStackScreen}
      />
      <Tab.Screen
        name="FinancialScreen"
        component={FinancialScreen}
        options={{
          tabBarLabel: '金融商品',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="chart-line"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="BettingRecordScreen"
        component={BettingRecordScreen}
        options={{
          tabBarLabel: '投注記錄',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="file-document"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="AccountScreen"
        component={AccountScreen}
        options={{
          tabBarLabel: '帳變紀錄',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="cash-100" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="MineScreen"
        component={MineScreen}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}



const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="FinancialScreen"
        component={FinancialScreen}
        options={{
          tabBarLabel: '金融商品',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="chart-line"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="BettingRecordScreen"
        component={BettingRecordScreen}
        options={{
          tabBarLabel: '投注記錄',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="file-document"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="AccountScreen"
        component={AccountScreen}
        options={{
          tabBarLabel: '帳變紀錄',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="cash-100" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="MineScreen"
        component={MineScreen}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{headerShown: false}}>
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
        <Stack.Screen name="Home" component={HomeTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
